<template>
  <yt-page title="安全风险" scroll :rightData="rightData" :input="input" @change="refresh">
    <yt-collapse v-model="active" :list="currentItems" label="enterpriseName">
      <div slot-scope="props" slot="default" style="text-algin: center">
        <yt-cell border="none" label="一级风险" isLink @click="goListPage(props.enterpriseId, '1级')">
          <span class="c-blue"> {{props.level['1级'] || 0}} 条</span>
        </yt-cell>
        <yt-cell border="none" label="二级风险" isLink @click="goListPage(props.enterpriseId, '2级')">
          <span class="c-blue"> {{props.level['2级'] || 0}} 条</span>
        </yt-cell>
        <yt-cell border="none" label="三级风险" isLink @click="goListPage(props.enterpriseId, '3级')">
          <span class="c-blue"> {{props.level['3级'] || 0}} 条</span>
        </yt-cell>
        <yt-cell border="none" label="四级风险" isLink @click="goListPage(props.enterpriseId, '4级')">
          <span class="c-blue"> {{props.level['4级'] || 0}} 条</span>
        </yt-cell>
        <div class="yt-card-btn" @click="goListPage(props.enterpriseId, null)">
          <div class="yt-view yt-button yt-button__blue yt-button__small is-plain is-round">
            <div class="yt-view-ripple"></div>
            <span class="yt-button-text">查看更多风险</span>
          </div>
        </div>
      </div>
    </yt-collapse>
  </yt-page>
</template>

<script>
  import _ from 'lodash'
  import gql from './index.gql'
  import { commonApi } from '@/common/api/commonApi.js'
  export default {
    data() {
      return {
        input: false,
        rightData: [{
          font: 'yt-icon yt-icon-search',
          click: () => {
            this.input = !this.input
          }
        }],
        active: [],
        items: [],
        dic: [],
        search: ''
      }
    },
    computed: {
      currentItems() {
        if (!this.search) return this.items
        return this.items.filter(item => {
          return item.enterpriseName.indexOf(this.search) > -1
        })
      }
    },
    activated() {
      if (this.$router.$isBack) return false
      this.fetchData()
    },
    methods: {
      async fetchData() {
        let p = [
          commonApi.search('ent_enterprise'),
          commonApi.gql(gql)
        ]
        let [entList, { data }] = await this.$Loading(...p)
        let obj = _.zipObject(data.keys, data.values)
        let items = []
        _.forIn(obj, (level, key) => {
          let ent = entList.find(v => v.id === key)
          let item = {
            enterpriseId: ent ? ent.id : '',
            enterpriseName: ent ? ent.EnterpriseName : '',
            level: _.zipObject(level.keys, level.values) || {}
          }
          items.push(item)
        })
        this.items = items
      },
      goListPage(enterpriseId, level) {
        let a = level ? { level: level } : {}
        let b = { user: enterpriseId }
        let param = { ...a, ...b }
        this.$router.$push({ path: '/security-risk/list', query: param })
      },
      refresh(search) {
        this.search = search
      }
    }
  }
</script>

<style lang="stylus" scoped>
  >>> .flex
    display flex
    justify-content space-between
    padding 10px
    border-bottom .5px solid #f5f5f5

  >>> .yt-cell
    background transparent

  >>> .yt-cell-label
    padding 0
</style>
